<template>
  <div class="vaw-nav-bar-wrapper">
    <ly-humburger />

    <ly-breadcrumb v-if="!getIsMobile" />
    <div style="flex: 1"></div>
    <div class="right-wrapper">
      <ly-action-items />
    </div>
    <div class="avatar-wrapper">
      <ly-v-a-w-avatar />
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import LyHumburger from "@/layouts/components/LyHumburger.vue";
import LyBreadcrumb from "@/layouts/components/LyBreadcrumb.vue";
import LyActions from "@/layouts/components/LyActions.vue";
import LyVAWAvatar from "@/layouts/components/LyVAWAvatar.vue";
import LyActionItems from "@/layouts/components/LyActionItems.vue";
import { LayoutStoreModule } from "@/store/modules/LayoutStore";

@Component({
  name: "LyNavbar",
  components: {},
})
export default class LyNavbar extends Vue {
  //#region vue prop =================================

  //#endregion

  //#region vue data =================================

  //#endregion
  //#region computed getter =================================
  get getIsMobile(): boolean {
    return LayoutStoreModule.device === "mobile";
  }
  //#endregion
  //#region vue life =================================
  created() {
    console.log("LyNavbar " + "created");
  }

  mounted() {
    console.log("LyNavbar " + "mounted");
  }

  beforeDestroy() {
    console.log("LyNavbar " + "beforeDestroy");
  }

  //#endregion
  //#region comp getter =================================

  //#endregion
  //#region server data =================================

  //#endregion
  //#region components Func =================================

  //#endregion
  //#region Public Func =================================

  //#endregion
  //#region view layout =================================

  //#endregion
}
</script>
<style lang="scss"></style>
<style scoped lang="scss">
@import "src/assets/styles/variables.scss";
.vaw-nav-bar-wrapper {
  height: $logoHeight;
  max-height: $logoHeight;
  min-height: $logoHeight;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  .avatar-wrapper {
    padding-right: 15px;
  }
  .right-wrapper {
    height: 100%;
  }
}
</style>
